<template>
    <g-table-page
        :store-model-name="storeModelName"
        :selection="false"
        :table-operation="tableOperation"
        :show-dropdown-groups="true"
    >
        <!-- 根据tableHeadList slotName字端 动态插入 插槽 -->
        <template v-for="item in tableHeadListSlotName" :key="item.slotName" #[item.slotName]="{ row }">
            <div v-if="row">
                <span v-if="item.prop == 'replyContent'">
                    <span v-if="row[item.prop]">{{ row[item.prop] }}</span>
                    <span v-else>
                        <a href="#" @click="() => { dialogVisible = true; formData.id = row.id; }">未反馈</a>
                    </span>
                </span>
            </div>
        </template>
    </g-table-page>
    <!-- 添加反馈内容 -->
    <g-dialog
        v-model:dialog-visible="dialogVisible"
        title="回复"
        width="650px"
        save-btn-text="提交"
        :click-sure-btn="saveReplyContentFunc"
    >
        <el-form
            ref="ruleForm"
            :model="formData"
            :rules="formRules"
            label-position="right"
            label-width="140px"
            inline
        >
            <el-form-item label="反馈内容：" prop="replyContent">
                <el-input
                    v-model="formData.id"
                    type="hidden"
                />
                <el-input
                    v-model="formData.replyContent"
                    :rows="6"
                    type="textarea"
                    placeholder="请输入反馈内容"
                    class="edit-item"
                    clearable
                />
            </el-form-item>
        </el-form>
    </g-dialog>
</template>

<script setup lang="ts">
import { computed, toRefs, ref, reactive } from 'vue'
import type { TableHeadList } from '@/types/storeModule'
import router from '@/router'
import store from '@/store'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { updateFeedbackApi } from '@/api/admin'
import type { Loading } from '@/components/Dialog/types'

const storeModelName = 'feedbackModule'
const dialogVisible = ref(false)
const ruleForm = ref<FormInstance>()
let formData = ref(<
    {
      id: string | number
      replyContent: string
    }
  >{
  	id: 0,
  	replyContent: ''
  })
const formRules = reactive<FormRules>({
	replyContent: [{ required: true, message: '请输入反馈内容', trigger: 'change' }]
})
const saveReplyContentFunc = async (loading: Loading) => {
	ruleForm.value?.validate(async (valid: boolean): Promise<void> =>  {
		if (valid) {
			loading(true)
			updateFeedbackApi(formData.value).then((res) => {
				// console.log('res---update', res);
				if(res*1 === 200)
					dialogVisible.value = false
				ElMessage.success('编辑成功')
				router.go(0)
			})
		} else {
			return
		}
	})
}

const tableOperation = {
	width: 80,
	fixed: 'right',
	buttonGroups: [
		({ row }) => {
			return {
				name: '编辑',
				isShow: true,
				click: ({ row }) => {
					dialogVisible.value = true
					formData.value.id = row.id
					formData.value.replyContent = row.replyContent
				}
			}
		},
		({ row }) => {
			return {
				name: '删除',
				type: 'danger',
				isShow: true,
				click: ({ row }) => {
					updateFeedbackApi({ id: row.id, status: 0 }).then((res) => {
						if (res * 1 === 200) {
							ElMessage.success('删除成功')
							setTimeout(() => {
								router.go(0)
							}, 100)
						}
					})
				}
			}
		}
	]
}

const tableHeadListSlotName = computed(() => {
	const tableHeadList = store.state[storeModelName].tableHeadList
	return tableHeadList.filter((item: TableHeadList) => item.slotName)
})
</script>
